<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>需要爱的小熊</title>
  <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
  />
  <style>
    * {
      box-sizing: border-box;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: #e6e6e6;
      min-height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
    }
    @media (prefers-color-scheme: dark) {
      body {
        background: #1a1a1a;
      }
    }
    .heart {
      position: absolute;
      height: calc(var(--size) * 1vmin);
      width: calc(var(--size) * 1vmin);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .heart svg {
      height: 100%;
      width: 100%;
    }
    .heart path {
      fill: hsl(var(--hue), 100%, 60%);
    }
    .backdrop {
      --color-one: #868ff9;
      --color-two: #86f9f9;
      --color-three: #bff986;
      --color-four: #f9e586;
      --color-five: #f99986;
      --cloud: rgba(255, 255, 255, 0.95);
      height: 100vmax;
      width: 100vmax;
      background: radial-gradient(
              circle at center center,
              var(--cloud) 20%,
              transparent 20%
      ), repeating-conic-gradient(var(--color-one) 0, var(--color-one) 10%, var(
                      --color-two
              ) 10%, var(--color-two) 20%, var(--color-three) 20%, var(
                      --color-three
              ) 30%, var(--color-four) 30%, var(--color-four) 40%, var(
                      --color-five
              ) 40%, var(--color-five) 50%);
      position: fixed;
      transform-origin: center;
      border-radius: 50%;
    }
    svg {
      --size: 50;
      height: calc(var(--size) * 1vmin);
      width: calc(var(--size) * 1vmin);
      z-index: 2;
    }
    span {
      z-index: 2;
    }
    .care-bear {
      --lightness: 50;
      cursor: pointer;
    }
    .care-bear__ear circle:nth-of-type(1) {
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__ear circle:nth-of-type(2) {
      --lightness: 90;
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__arm rect {
      --lightness: 45;
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__feet {
      --lightness: 40;
    }
    .care-bear__feet path {
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__head circle {
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__belly circle:nth-of-type(1) {
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__belly circle:nth-of-type(2) {
      --lightness: 90;
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__heart {
      --saturation: 20;
      --hue: 0;
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    .care-bear__muzzle {
      --lightness: 90;
    }
    .care-bear__muzzle circle {
      fill: hsl(
              var(--hue),
              calc(var(--saturation) * 1%),
              calc(var(--lightness) * 1%)
      );
    }
    /**
* Rain
*/
    .rain svg {
      -webkit-animation-delay: calc(var(--d) * -1s);
      animation-delay: calc(var(--d) * -1s);
      -webkit-animation-duration: calc(var(--a) * 1s);
      animation-duration: calc(var(--a) * 1s);
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-name: drop;
      animation-name: drop;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      height: 3vmin;
      left: calc(var(--x) * 1%);
      position: absolute;
      top: calc((var(--y) + 50) * -1px);
      width: 3vmin;
      z-index: -1;
    }
    .rain svg path {
      fill: #a1c6cc;
      stroke: none;
      opacity: var(--o);
      transform: scaleY(calc(var(--s) * 1.5));
    }
    @-webkit-keyframes drop {
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateY(75vmin);
      }
    }
    @keyframes drop {
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateY(75vmin);
      }
    }
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="backdrop"></div>
<div class="hearts"></div>
<span title="Hold mouse/finger down">
      <svg
              class="care-bear"
              xmlns="http://www.w3.org/2000/svg"
              viewbox="0 0 59.068209 54.91329"
      >
        <g transform="translate(-70.967674 -112.10752)">
          <g
                  class="care-bear__ear care-bear__ear--right"
                  transform="translate(19.587616 -5.1859387)"
          >
            <circle r="5.953125" cy="124.5695" cx="89.267891"></circle>
            <circle cx="89.267891" cy="124.5695" r="4.3193078"></circle>
          </g>
          <g
                  class="care-bear__ear care-bear__ear--left"
                  transform="translate(3.1834476 -5.1859387)"
          >
            <circle cx="89.267891" cy="124.5695" r="5.953125"></circle>
            <circle r="4.3193078" cy="124.5695" cx="89.267891"></circle>
          </g>
          <g class="care-bear__arm care-bear__arm--right">
            <rect
                    transform="matrix(.69012 .7237 .69116 -.7227 0 0)"
                    ry="2.5978234"
                    y="-19.412512"
                    x="174.93823"
                    height="19.637407"
                    width="5.1956468"
            ></rect>
          </g>
          <g class="care-bear__arm care-bear__arm--left">
            <rect
                    width="5.1956468"
                    height="19.637407"
                    x="29.517857"
                    y="-165.03149"
                    ry="2.5978234"
                    transform="matrix(-.69012 .7237 -.69116 -.7227 0 0)"
            ></rect>
          </g>
          <g class="care-bear__feet">
            <path
                    d="M94.1591085 159.39647033l1.13016505 3.97753411a5.29166634 5.29166634 0 00-.59738153-.03824023 5.29166634 5.29166634 0 00-5.02863109 3.68504783h21.7004818a5.29166634 5.29166634 0 00-5.0301842-3.68504783 5.29166634 5.29166634 0 00-.5968603.03720836l1.12964647-3.97650224z"
            ></path>
          </g>
          <g class="care-bear__head">
            <circle cx="100.51268" cy="128.75888" r="13.229167"></circle>
          </g>
          <g class="care-bear__belly">
            <circle cx="100.51268" cy="149.04999" r="13.229167"></circle>
            <circle cx="100.51268" cy="149.04999" r="8.598958"></circle>
            <g class="care-bear__heart">
              <path
                      d="M98.30347449 144.82645224c-.65124542 0-1.3024231.24925602-1.80144155.74827342-.99803372.99803478-.99803372 2.60484935 0 3.6028815l.4919599.49299282 3.60339796 3.6028815 3.60339744-3.6028815.32246093-.32297687c.99803744-.99803479.99803744-2.60536265 0-3.60339743-.49901474-.4990174-1.15013845-.748792-1.80144207-.748792-.65130097 0-1.30293797.2497746-1.80195536.748792l-.32246094.32297687-.49196095-.4924769c-.4990174-.49901739-1.1507126-.7482734-1.80195536-.7482734z"
              ></path>
            </g>
          </g>
          <g class="care-bear__muzzle">
            <circle cx="100.29227" cy="132.97391" r="5.9451938"></circle>
          </g>
          <g class="care-bear__nose">
            <ellipse
                    cx="100.29227"
                    cy="129.55186"
                    rx="1.5612032"
                    ry="1.1618258"
            ></ellipse>
          </g>
          <g
                  class="care-bear__eye care-bear__eye--right"
                  transform="translate(17.991638)"
          >
            <circle cx="91.364403" cy="128.15633" r="1.3229166"></circle>
            <g class="care-bear__pupil care-bear__pupil--right">
              <circle
                      cx="91.89357"
                      cy="127.62716"
                      r=".26458332"
                      fill="#fff"
              ></circle>
            </g>
          </g>
          <g class="care-bear__eye care-bear__eye--left">
            <circle r="1.3229166" cy="128.15633" cx="91.364403"></circle>
            <g class="care-bear__pupil care-bear__pupil--left">
              <circle
                      r=".26458332"
                      cy="127.62716"
                      cx="91.89357"
                      fill="#fff"
              ></circle>
            </g>
          </g>
          <g class="care-bear__cheek care-bear__cheek--left">
            <circle
                    cx="91.364403"
                    cy="128.15633"
                    r="1.3229166"
                    fill="#faa"
                    transform="translate(0 3.1750001)"
            ></circle>
          </g>
          <g class="care-bear__cheek care-bear__cheek--right">
            <circle
                    r="1.3229166"
                    cy="128.15633"
                    cx="91.364403"
                    transform="translate(17.991638 3.1750001)"
                    fill="#faa"
            ></circle>
          </g>
          <g class="care-bear__mouth">
            <path
                    d="M98.069425 133.1097a2.2359423 2.2359423 0 002.221095 2.00623 2.2359423 2.2359423 0 002.22459-2.00623z"
            ></path>
            <path
                    d="M100.97006285 134.12669591a.76244812.72614104 0 00-.76274347.7260537.76244812.72614104 0 00.05167577.26199835 2.23594226 2.23594226 0 00.03152246.00105834 2.23594226 2.23594226 0 001.40094757-.49506187.76244812.72614104 0 00-.72140233-.4940247z"
                    fill="red"
            ></path>
          </g>
        </g></svg
      ></span>
<div class="rain">
  <svg>
    <path></path>
  </svg>
</div>
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
<script>
  const { gsap } = window;
  const { timeline, to, set } = gsap;

  const $RAIN = document.querySelector('.rain');
  const $BACKDROP = document.querySelector('.backdrop');
  const $HEARTS = document.querySelector('.hearts');
  const $BEAR = document.querySelector('.care-bear');
  const $BEAR_ARM_LEFT = document.querySelector('.care-bear__arm--left');
  const $BEAR_ARM_RIGHT = document.querySelector('.care-bear__arm--right');
  const $BEAR_EAR_LEFT = document.querySelector('.care-bear__ear--left');
  const $BEAR_EAR_RIGHT = document.querySelector('.care-bear__ear--right');
  const $BEAR_MOUTH = document.querySelector('.care-bear__mouth');
  const $BEAR_NOSE = document.querySelector('.care-bear__nose');
  const $BEAR_CHEEK_LEFT = document.querySelector(
          '.care-bear__cheek--left'
  );
  const $BEAR_CHEEK_RIGHT = document.querySelector(
          '.care-bear__cheek--right'
  );
  const $BEAR_EYE_LEFT = document.querySelector('.care-bear__eye--left');
  const $BEAR_EYE_RIGHT = document.querySelector('.care-bear__eye--right');
  const $BEAR_PUPIL_LEFT = document.querySelector(
          '.care-bear__pupil--left'
  );
  const $BEAR_PUPIL_RIGHT = document.querySelector(
          '.care-bear__pupil--right'
  );
  const $BEAR_BELLY = document.querySelector('.care-bear__belly');
  const $BEAR_MUZZLE = document.querySelector('.care-bear__muzzle');
  const $BEAR_HEART = document.querySelector('.care-bear__heart');

  const SPEEDS = {
    BACKDROP: {
      SCALE: 0.25,
      SPIN: 0.85,
    },

    BREATHING: 1.5,
    SWITCH: 0.05,
  };

  const STATE = {
    FIRING: false,
    CLOSING: false,
  };

  set(document.body, { opacity: 1 });
  // Set the backdrop scale to 0
  set($BACKDROP, { scale: 0 });
  // Set bear to sulking
  set($BEAR, {
    '--hue': Math.floor(Math.random() * 360),
    '--saturation': 0,
  });
  set($BEAR_ARM_LEFT, {
    transformOrigin: '85% 80%',
    scale: 0.85,
    rotate: -110,
  });

  set($BEAR_ARM_RIGHT, {
    transformOrigin: '15% 80%',
    scale: 0.85,
    rotate: 110,
  });

  set($BEAR_EAR_LEFT, { transformOrigin: '70% 85%', rotate: -60 });
  set($BEAR_EAR_RIGHT, { transformOrigin: '30% 85%', rotate: 60 });
  set($BEAR_MOUTH, { transformOrigin: '50%, 0', scaleY: 0, y: '+=2' });
  set($BEAR_NOSE, { transformOrigin: '50% 50%', y: '+=2' });
  set($BEAR_BELLY, { transformOrigin: '50% 50%' });
  set($BEAR_MUZZLE, { transformOrigin: '50% 50%' });
  set($BEAR_HEART, { transformOrigin: '50% 50%' });
  set([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
    transformOrigin: '50% 50%',
    opacity: 0,
    y: '+=2',
  });

  set([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
    transformOrigin: '50% 50%',
    y: '+=2',
    clipPath: 'inset(50% 0 0 0)',
  });

  set([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
    transformOrigin: '50% 50%',
    z: 1,
    y: '+=1.25',
  });

  const OPEN_BACKDROP_TL = new timeline({})
          .add(to($BACKDROP, { scale: 1.5, duration: SPEEDS.BACKDROP.SCALE }))
          .add(
                  to($BACKDROP, {
                    rotate: 360,
                    duration: SPEEDS.BACKDROP.SPIN,
                    repeat: -1,
                    ease: 'none',
                  }),

                  0
          );

  OPEN_BACKDROP_TL.pause();

  const CLOSE_BACKDROP_TL = new timeline({
    onComplete: () => {
      if (OPEN_BACKDROP_TL) {
        STATE.CLOSING = false;
        STATE.FIRING = false;
        OPEN_BACKDROP_TL.pause();
        BREATHING_TL.play();
      }
    },
  }).add(to($BACKDROP, { scale: 0, duration: SPEEDS.BACKDROP.SCALE }));

  const HEART_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.258088 6.7122535">
  <path d="M2.56864 1.32292c-.31816 0-.63626.12209-.88005.36587-.48757.48758-.48757 1.27253 0 1.7601l.18035.18035 1.7601 1.7601 1.7601-1.7601.18035-.18035c.48757-.48757.48757-1.27252 0-1.7601-.24379-.24378-.56189-.36587-.88005-.36587-.31815 0-.63626.12209-.88005.36587l-.18035.18035-.18035-.18035c-.24379-.24378-.5619-.36587-.88005-.36587z" fill="red"/>
</svg>
`;
  const fireHearts = () => {
    const newHeart = document.createElement('div');
    newHeart.className = 'heart';
    newHeart.style.setProperty(
            '--size',
            Math.floor(Math.random() * 30 - 10 + 1) + 5
    );

    // newHeart.style.setProperty(
    //   '--hue',
    //   Math.floor(Math.random() * 150 - 10 + 1) + 10
    // )
    newHeart.style.setProperty('--hue', Math.floor(Math.random() * 360));
    newHeart.innerHTML = HEART_SVG;
    const svg = newHeart.querySelector('svg');
    $HEARTS.appendChild(newHeart);
    set(newHeart, { rotate: 'random(0, 360)', transformOrigin: '50% 50%' });
    to(svg, {
      y: '-100vmax',
      duration: 'random(0.5, 1.5)',
      onComplete: () => {
        newHeart.remove();
      },
    });

    if (STATE.FIRING && !STATE.CLOSING) {
      requestAnimationFrame(fireHearts);
    } else {
      $HEARTS.innerHTML = '';
    }
  };

  CLOSE_BACKDROP_TL.pause();
  const RAISE_TL = new timeline()
          .add(
                  to([$BEAR_ARM_LEFT, $BEAR_ARM_RIGHT], {
                    duration: SPEEDS.SWITCH,
                    scale: 1,
                    rotate: 0,
                  })
          )
          .add(
                  to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
                    duration: SPEEDS.SWITCH,
                    rotate: 0,
                  }),

                  0
          )
          .add(
                  to($BEAR_HEART, {
                    duration: SPEEDS.SWITCH,
                    scale: 1.1,
                  }),

                  0
          )
          .add(to($BEAR_NOSE, { duration: SPEEDS.SWITCH, y: 0 }), 0)
          .add(to($BEAR_MOUTH, { duration: SPEEDS.SWITCH, y: 0, scaleY: 1 }))
          .add(
                  to([$BEAR_CHEEK_LEFT, $BEAR_CHEEK_RIGHT], {
                    duration: SPEEDS.SWITCH,
                    opacity: 1,
                    y: 0,
                  }),

                  0
          )
          .add(
                  to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
                    duration: SPEEDS.SWITCH,
                    clipPath: 'inset(0 0 0 0)',
                    y: 0,
                  }),

                  0
          )
          .add(
                  to([$BEAR_PUPIL_LEFT, $BEAR_PUPIL_RIGHT], {
                    duration: SPEEDS.SWITCH,
                    y: 0,
                  }),

                  0
          )
          .add(
                  to($BEAR_HEART, { duration: SPEEDS.SWITCH, '--saturation': 100 }),
                  0
          )
          .add(to($BEAR, { duration: SPEEDS.SWITCH, '--saturation': 100 }), 0);
  RAISE_TL.pause();

  const BREATHING_TL = new timeline({ repeat: -1, yoyo: true })
          .add(to($BEAR_BELLY, { scale: 1.025, duration: SPEEDS.BREATHING }))
          .add(
                  to($BEAR_ARM_RIGHT, { rotate: 108, duration: SPEEDS.BREATHING }),
                  0
          )
          .add(
                  to($BEAR_ARM_LEFT, { rotate: -108, duration: SPEEDS.BREATHING }),
                  0
          )
          .add(to($BEAR_NOSE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0)
          .add(
                  to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
                    y: '-=0.4',
                    duration: SPEEDS.BREATHING,
                  }),

                  0
          )
          .add(
                  to([$BEAR_EAR_LEFT, $BEAR_EAR_RIGHT], {
                    y: '-=0.4',
                    duration: SPEEDS.BREATHING,
                  }),

                  0
          )
          .add(to($BEAR_MUZZLE, { y: '-=0.4', duration: SPEEDS.BREATHING }), 0);

  let BLINKING_TL;
  const blink = () => {
    const DELAY = Math.floor(Math.random() * 5 - 1 + 1) + 1;
    BLINKING_TL = new timeline().add(
            to([$BEAR_EYE_LEFT, $BEAR_EYE_RIGHT], {
              delay: DELAY,
              scaleY: 0,
              duration: SPEEDS.SWITCH,
              repeat: 1,
              yoyo: true,
              onComplete: blink,
            })
    );
  };
  blink();

  const tease = () => {
    BLINKING_TL.seek(0);
    BLINKING_TL.pause();
    to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
      duration: SPEEDS.SWITCH,
      clipPath: 'inset(0 0 0 0)',
    });
  };

  const sadden = () => {
    BLINKING_TL.restart();
    to([$BEAR_EYE_RIGHT, $BEAR_EYE_LEFT], {
      clipPath: 'inset(50% 0 0 0)',
      duration: SPEEDS.SWITCH,
    });
  };

  const handleKeyDown = (e) => {
    if (e.keyCode === 32 && !STATE.FIRING && !STATE.CLOSING) start();
  };

  const handleKeyUp = (e) => {
    if (e.keyCode === 32 && STATE.FIRING && !STATE.CLOSING) end();
  };

  const start = () => {
    if (STATE.CLOSING) return;
    document.body.removeEventListener('keypress', handleKeyDown);
    STATE.FIRING = true;
    OPEN_BACKDROP_TL.restart();
    RAISE_TL.play();
    BREATHING_TL.pause();
    BLINKING_TL.pause();
    BLINKING_TL.seek(0);
    $RAIN.style.display = 'none';
    fireHearts();
  };

  const end = () => {
    if (STATE.CLOSING || !STATE.FIRING) return;
    document.body.addEventListener('keypress', handleKeyDown);
    STATE.CLOSING = true;
    CLOSE_BACKDROP_TL.restart();
    BLINKING_TL.restart();
    RAISE_TL.reverse();
    $RAIN.style.display = 'block';
    sadden();
  };

  $BEAR.addEventListener('mousedown', start);
  $BEAR.addEventListener('touchstart', start);
  $BEAR.addEventListener('mouseup', end);
  $BEAR.addEventListener('touchend', end);
  $BEAR.addEventListener('mouseover', tease);
  $BEAR.addEventListener('mouseleave', sadden);
  document.body.addEventListener('keydown', handleKeyDown);
  document.body.addEventListener('keyup', handleKeyUp);

  /**
   * Should it be raining?
   */
  const letItRain = new Date().getHours() % 2;
  if (letItRain) {
    // Create a random number of rain drops and animate them.
    for (let d = 0; d < Math.floor(Math.random() * 25); d++) {
      // Create an SVG droplet and append it to the DOM
      const droplet = document.querySelector('svg').cloneNode();
      droplet.setAttribute('viewBox', '0 0 5 50');
      droplet.setAttribute(
              'style',
              `--x: ${Math.floor(Math.random() * 100)}; --y: ${Math.floor(
                      Math.random() * 100
              )}; --o: ${Math.random()}; --a: ${Math.random() + 0.5}; --d: ${
                      Math.random() * 2 - 1
              }; --s: ${Math.random()}`
      );

      droplet.innerHTML = `<path d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path>`;
      $RAIN.appendChild(droplet);
    }
  }
</script>
</body>
</html>
